<template>
    <div>
        <h2>会员添加</h2>
        <table class="table">
        <thead>
            <tr>
                <td>会员名称</td>
                <td>
                  <input type="text" name="" id="" v-model="data.name">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="" id="" v-model="data.password">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                   <input type="radio" name="sex" value="1" v-model="data.sex">女
                   <input type="radio" name="sex" value="2" v-model="data.sex">男
                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <input type="date" name="" id="" v-model="data.birthday">
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" name="" id="" v-model="data.phoneNumber">
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>
                    <input type="text" name="" id="" v-model="data.age">
                </td>
            </tr>
           
            <tr>
                <td>状态</td>
                <td>
                  <input type="checkbox" v-model="data.state">选中为启用，不选中为禁用
                </td>
            </tr>
            <tr>
                <td>等级编号</td>
                <td>
                    <select v-model="data.memberLevelId">
            <option value=0>请选择</option>
            <option v-for="a in dtxlk" :value=a.id>{{ a.levelTitle }}</option>
        </select>
                </td>
            </tr>
            <tr>
                <td>头像</td>
                <td>
                    <input type="file" @change="Upload">
                    <img :src="'https://localhost:7190'+data.img" style="height: 60px;width: 60px;">
                </td>
            </tr>
            <tr>
               
                <td colspan="2">
                    <input type="button" value="添加" @click="Add">
                </td>
            </tr>
        </thead>
           
        </table>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from "axios";
import { useRoute } from 'vue-router';
const route=useRoute
const data=ref({
    "id": 0,
  "name": "",
  "password": "",
  "sex": 0,
  "birthday": "2025-04-02T09:08:29.942Z",
  "phoneNumber": "",
  "age": 0,
  "isDelete": true,
  //"createDate": "2025-04-02T09:08:29.942Z",
  "state": true,
  "memberLevelId": 0,
  "img": "string"
})
const Add=()=>{
    axios.post("https://localhost:7190/api/Member/Addmem",data.value).then(res=>{
       if(res.data>0){
        alert('添加成功');
        location.href='/ShowView';
       }
       else{
        alert('添加失败');
       }
    })
}
onMounted(() => {
   
    Getshow();
})

const dtxlk=ref([{
    "id": 1,
    "levelTitle": "高级会员",
    "state": true
}])
const Getshow=()=>{
    axios.get("https://localhost:7190/api/Member/GetLevels").then(
        res=>{
            dtxlk.value=res.data; 
        }
    )
}
const Upload=(e:any)=>{
    var a =e.target.files[0];
    var b =new FormData();
    b.append("file",a);
    if(a.size>1024*1024*2){
        alert("文件不能超过2MB");
        return;
    }
    if(a.type!="webp"){
        alert("图片格式不正确");
        return;
    }
    axios.post("https://localhost:7190/api/File",b).then(res=>{
        data.value.img = res.data;
    })
}
</script>
<style scoped></style>